<template>
<div>
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>轨检数据智能算法</el-breadcrumb-item>
            <el-breadcrumb-item>轨检数据沉降检测</el-breadcrumb-item>
        </el-breadcrumb>
    </el-card>

    <!-- 高差数据显示 :style="{width: '1000px', height: '300px'}"-->
    <el-row :gutter="20" class="row2">
        <el-col :span="14">
            <el-card>
                <div id="line1" :style="{width: '600px', height: '300px'}"></div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <div id="pie1" :style="{width: '400px', height: '300px'}"></div>
            </el-card>
        </el-col>
    </el-row>

</div>
</template>

<script>
var echarts = require("echarts")

export default {
    data() {
        return {
            gcData: []
        }
    },
    mounted() {
        this.drawLine()
        this.drawPie()
    },
    methods: {
        drawPie() {
            let myChart = echarts.init(document.getElementById('pie1'))
            myChart.setOption({
                title: {
                    text: '线路沉降分布图',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['轻微沉降段', '中度沉降段', '重度沉降段', '正常路段']
                },
                series: [{
                    name: '沉降状况',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [{
                            value: 354,
                            name: '轻微沉降段'
                        },
                        {
                            value: 2,
                            name: '中度沉降段'
                        },
                        {
                            value: 1,
                            name: '重度沉降段'
                        },
                        {
                            value: 1359,
                            name: '正常路段'
                        }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            })

        },
        async drawLine() {
            let myChart = echarts.init(document.getElementById('line1'))
            // 空图
            myChart.setOption({
                title: {
                    text: '轨检数据沉降指标数据',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: [],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            })
            // showloading
            myChart.showLoading();

            const res = await this.$http.post('/getGc')
            this.gcData = res.data.data;
            //console.log(this.trackdd[0].length)
            const len = this.gcData.length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }
            // loading
            myChart.hideLoading();
            myChart.setOption({
                title: {
                    text: '轨检数据沉降指标数据',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['高差(mm)'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '高差(mm)',
                    data: this.gcData,
                    type: 'line'
                }]
            })
        }
    }

}
</script>

<style>
.row2 {
    margin-top: 20px;
}
</style>
